<template>
    <el-dialog :visible.sync="dialog" :title="isAdd ? '新增用户' : '编辑用户'" append-to-body width="700px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="100px">
            <el-form-item label="账号" prop="userId">
                <el-input v-model="form.userId" style="width: 224px;" placeholder="请输入账号" @change="toUserId()" maxlength="20" clearable/>
            </el-form-item>

            <el-form-item label="姓名" prop="userName">
                <el-input v-model="form.userName" style="width: 224px;" placeholder="请输入姓名" maxlength="16" minlength="2" clearable/>
            </el-form-item>

            <el-form-item label="密码" prop="password" v-if="this.show">
                <el-input v-model="form.password" style="width: 224px;"  show-password placeholder="请输入密码" maxlength="18" clearable/>
            </el-form-item>
     
            <el-form-item label="手机号" prop="mobile">
                <el-input v-model="form.mobile" style="width: 224px;" placeholder="请输入手机号"  maxlength="11" clearable/>
            </el-form-item>

            <el-form-item label="县/区" prop="areaCode" v-if="this.show">
                <area-item @getMessage="showMsg" style="width: 224px;" />
            </el-form-item>

           <!--  <el-form-item label="用户类型" prop="userType">
                 <el-select v-model="form.userType" clearable placeholder="请选择" style="width: 224px;" @change="toQuery()">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
            </el-form-item> -->

            <el-form-item label="所属角色" prop="roleIds">
                <el-select v-model="form.roleIds" clearable multiple :multiple-limit="2" filterable placeholder="请选择" style="width: 224px;">
                    <el-option
                        v-for="item in roles"
                        :key="item.id"
                        :label="item.roleName"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="电子邮箱" prop="email">
                <el-input v-model="form.email" style="width: 224px;" placeholder="请输入电子邮箱" maxlength="18" clearable/>
            </el-form-item>

            <el-form-item label="身份证号" prop="cardId">
                <el-input v-model="form.cardId" style="width: 224px;" placeholder="请输入身份证号" maxlength="18" clearable/>
            </el-form-item>

            <el-form-item label="是否启用" prop="status">
                <el-radio v-model="form.status" :label="0">启用</el-radio>
                <el-radio v-model="form.status" :label="1">禁用</el-radio>
            </el-form-item>

            <el-form-item label="用户简介">
                <div style="margin-top:10px"></div>
                <el-input v-model="form.remark" style="width: 550px;" rows="3" type="textarea" maxlength="100"  clearable show-word-limit />
            </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button type="text" @click="cancel">取消</el-button>
            <el-button :loading="loading" type="primary" @click="doSubmit" :disabled="this.disabled">确认</el-button>
        </div>
    </el-dialog>
</template>

<script>
import areaItem from '@/components/area/areaitem'
import { userSave, getRoles } from '@/api/request'
import { valitoUserId } from '@/api/data'
import { validateUserId,validatPass,validateIdNo, validatePhone, validateEmpty, debounce } from '@/utils/validate'
import { editUser } from '@/api/data'
export default {
    components: { areaItem },
    props: {
        isAdd: {
          type: Boolean,
          required: true
        },
        roles:{
            type: Array,
            required: true
        }
    },
    data() {
        const validateuserId = (rule, value, callback) => {
            if (value.trim().length < 1) {
                callback(new Error('用户账号不能为空'))
            } 
            if (!validateUserId(value)) {
                callback(new Error('以字母开头,只能输入数字、字母、下划线'))
            } 
            else {
                callback()
            }
        };
        const validatepassword = (rule, value, callback) => {
            if (value.trim().length < 1) {
                callback(new Error('密码不能为空'))
            } 
            if (!validatPass(value)) {
                callback(new Error('数字,字母,大小写,特殊字符至少有两种'))
            } 
            else {
                callback()
            }
        };
        return {
            show:true,
            disabled:true,
            loading: false, dialog: false, permissions: [],
            form: { id:'',userId: '', password: '',userName:'', mobile:'', userType:0,status: 0,cardId:'',roleIds:[],remark:'',areaCode:'',email:'' },
            rules: {
                userId: [
                    { required: true, trigger: 'blur',validator: validateuserId,},
                    {
                        min: 4,
                        max: 20,
                        message: '账号长度在4到20位',
                        trigger: 'blur',
                    },
                ],
                password: [
                    { required: true, trigger: 'blur',validator: validatepassword,},
                    {
                        min: 6,
                        max: 18,
                        message: '密码长度为6-16位',
                        trigger: 'blur',
                    },
                ],
                userName:[
                    { required: true, trigger: 'blur',min: 2,max: 16,
                        message: '姓名长度在 2 到 16个字符'},
                    {validator:validateEmpty,trigger: 'blur',}    
                ],
                // userType:[
                //     { required: true, trigger: 'blur',
                //         message: '请选择用户类型,'},
                // ],
                roleIds:[
                    { required: true, trigger: 'blur',
                        message: '请选择角色,'},
                ],
                // cardId: [
                //     { required: true, 
                //         message: '请输入18位身份证号码！',
                //         trigger: 'blur',
                //     },
                //     {
                //         validator: validateIdNo,
                //         trigger: 'blur',
                //     }
                // ],
                areaCode:[
                    { required: true, trigger: 'blur',
                        message: '请选择县/区'},
                ],
                mobile:[
                    { required: true, trigger: 'blur',message: '手机号不能为空', },
                    {validator:validatePhone,trigger: 'blur',}
                ],

            },
            options: [
                {
                    value: '0',
                    label: '区域用户'
                },
                {
                    value: '1',
                    label: '老师'
                },
                {
                    value: '2',
                    label: '学生'
                },
            ],
            
        }
    },
    methods: {
        showMsg(tir){
            this.form.areaCode = tir;
        },
        cancel(){
            this.dialog  = false
        },
        doSubmit:debounce(function(){
            this.form.userId = this.form.userId.trim()
            this.form.userName = this.form.userName.trim()
            this.form.password = this.form.password.trim()
            this.$refs['form'].validate((valid) => {
                if (valid){
                    userSave(this.form).then(res => { 
                        this.$notify({
                            title: '保存成功',
                            type: 'success',
                            duration: 2500
                        })
                        this.dialog = false
                        this.$parent.init()
                    })
                }else {
                    return false
                }
                
            })            
        },500),
        toUserId(){
            this.form.userId = this.form.userId.trim()
            if (this.form.userId) {
                valitoUserId(this.form.userId).then(res => {
                        if (res.data === false) {
                            this.disabled = true
                            this.$message({
                                message: '用户账号已存在',
                                type: 'error'
                            });
                        }else{
                            this.disabled = false
                        }
                })
            }else{
                this.disabled = true
                return
            }
        },      
        
    }
}
</script>

<style scoped>
.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
    display: inline-block;
}
</style>
